<template>
  <div class="conversations">
    <div class="conversation-list">
      <div class="conversation-list-container">
        <div class="conversation-list-content">
          好友
          <div v-if="conversations">
            <div
              v-for="conversation in conversations"
              @click="componentName='privateChat',setId(conversation.data.userId)">
              <div class="conversation">
                <div class="avatar">
                  <img :src="conversation.data.avatar"/>
                </div>
                <div class="conversation-message">
                  <div class="conversation-top">
                    <span class="conversation-name">{{ conversation.data.nickName }}</span>
                    <div class="conversation-time">
                      <div>{{ formatDate(conversation.data.createTime) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          群聊
          <div v-if="conversationgroups">
            <div
              v-for="conversation in conversationgroups"
              @click="componentName='groupChat',setGroupId(conversation.id)">
              <div class="conversation">
                <div >
                  <img :src="conversation.groupAvatar" class="avatar"/>
                </div>
                <div class="conversation-message">
                  <div class="conversation-top">
                    <span class="conversation-name">{{ conversation.groupName }}</span>
                    <div class="conversation-time">
                      <div>{{ formatDate(conversation.createTime)  }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-conversation">- 当前没有会话 -</div>
        </div>

      </div>
    </div>
    <div class="chat">
      <Component :is="componentName"></Component>
    </div>
  </div>
</template>

<script>

import {formatDate} from '../../../utils/utils.js'
import PrivateChat from "@/views/message/message/PrivateChat";
import GroupChat from "@/views/message/message/GroupChat";
import request from '@/utils/request'
import {byUserId, userList,} from "@/api/message/message";
import {listGroups} from "@/api/message/group";

export default {
  name: 'Conversations',
  components: {PrivateChat, GroupChat},
  data() {
    return {
      conversations: [],
      conversationgroups: [],
      componentName: "privateChat",
      currentUser: "",
      // Conversation右键菜单
      rightClickMenu: {
        conversation: null,
        visible: true,
        x: null,
        y: null,
      },
      imagePreview: {
        visible: false,
        url: ''
      },
    };
  },

  created() {
    this.currentUser = this.$store.state.user.user;
    byUserId(this.currentUser.userId).then(resp => {
      this.conversations = resp
    })
    listGroups(this.currentUser.userId).then(resp => {
      this.conversationgroups = resp.rows
    })
  },
  methods: {
    setId(id) {
      this.$store.state.chat.id = id
    },
    setGroupId(id) {
      this.$store.state.chat.id = id
    },
    formatDate,
    showRightClickMenu(e, conversation) {
      this.rightClickMenu.conversation = conversation;
      this.rightClickMenu.visible = true;
      this.rightClickMenu.x = e.pageX;
      this.rightClickMenu.y = e.pageY;
    },
    hideRightClickMenu() {
      this.rightClickMenu.visible = false;
    },
    sendMessage() {
    },
  },
};
</script>

<style scoped>
.conversations {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  color: #333333;
}

.conversation-list {
  width: 220px;
}

.conversation-list-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-right: #dbd6d6 1px solid;
}

.conversation-list-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.conversation-list-content::-webkit-scrollbar {
  display: none;
}

.no-conversation {
  text-align: center;
  color: #666666;
}

.conversation {
  display: flex;
  padding: 10px 5px;
  cursor: pointer;
}

.unread-count {
  position: absolute;
  top: -10px;
  left: 30px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: white;
  background: #d02129;
}

.unread-count .unread {
  display: block;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
}

.conversation-message {
  flex: 1;
  padding-left: 5px;
  display: flex;
  width: 160px;
  flex-direction: column;
  justify-content: space-around;
}

.conversation-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: right;
}

.conversation-name {
  font-size: 12px;
  font-weight: 500;
}

.conversation-time {
  width: 75px;
  color: #B9B9B9;
  display: flex;
  flex-direction: column;
}

.conversation-bottom {
  display: flex;
  color: #666666;
}

.conversation-content {
  display: flex;
  width: 160px;
  color: #b3b3b3;
}

.conversation-content .text {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  white-space: nowrap;
  word-break: break-all;
}

.conversation-bottom .unread-text {
  color: #d02129;
  width: 35px !important;
}

.conversation .avatar {
  width: 40px;
  height: 40px;
  position: relative;
}

.conversation .avatar img {
  width: 100%;
  border-radius: 10%;
}

.router-link-active {
  background: #eeeeee;
}

.action-box {
  width: 100px;
  height: 60px;
  background: #ffffff;
  border: 1px solid #cccccc;
  position: fixed;
  z-index: 100;
  border-radius: 5px;
}

.action-box .action-item {
  padding-left: 15px;
  line-height: 30px;
  font-size: 13px;
  color: #262628;
  cursor: pointer;
}

.action-box .action-item:hover {
  background: #dddddd;
}

.chat {
  flex: 1;
  display: flex;
}

</style>
